@import "util";
@import "../common/rem";
@import "../common/flex-class";
@import "../common/mixins";

#whocansee {

    .icon--13:before {
        .px2rem(line-height, 120);
        position: absolute;
        .px2rem(left, 32);
        .px2rem(font-size, 36);
        color: #F76A75;
    }
    .icon--20 {
        color: #CCCCCC;
        .px2rem(font-size, 36);

    }
    .icon--14:before {
        .px2rem(line-height, 120);
        position: absolute;
        top: 0;
        .px2rem(right, 32);
        .px2rem(font-size, 20);
        color: #F76A75;
        //.px2rem(padding-left,20);
        //.px2rem(padding-right,20);
    }
    .open {
        display: block;
    }
    .close {
        display: none;
    }
    .item-child-main-contact, .item-child-main-group {

        .item-child-name, .item-child-name-group, .item-child-name-contact {
            .px2rem(margin-left, 10);
            .px2px(font-size, 30);
        }
        .item-child, .other {
            .item-child-name {
                display: inline;
            }
            .choose {
                visibility: hidden;
            }
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            position: relative;
            .px2rem(padding-left, 95);
            .px2rem(padding-right, 95);
            background: #f0f4f6;
            .px2rem(height, 120);
            .px2px(font-size, 30);
            span {
                .px2rem(height, 120);
                .px2rem(line-height, 120);
                vertical-align: middle;
                display:inline-block;
            }
            &:last-child {
                .hairline(bottom, #ddd);
            }
            .icon--10 {
                .px2rem(font-size, 36);
                color: #F76A75;
            }
            &:after {
                content: '';
                position: absolute;
                .px2rem(left, 95);
                bottom: 0;
                right: auto;
                top: auto;
                height: 1px;
                width: 100%;
                background-color: #ddd;
                display: block;
                z-index: 15;
                //transform-origin: 50% 100%;
                //@media only screen and (-webkit-min-device-pixel-ratio: 2) {
                //    transform: scaleY(0.5);
                //}
                //@media only screen and (-webkit-min-device-pixel-ratio: 3) {
                //    transform: scaleY(0.33);
                //}
            }
        }
    }
    .item {
        position: relative;
    }
    .item-main {
        position: relative;
        .hairline(bottom, #ddd);
        .px2rem(height, 120);
        .px2rem(padding-top, 24);
        .px2rem(padding-bottom, 24);
        .px2rem(padding-left, 95);
        .px2rem(padding-right, 95);
        .title {
            .px2px(font-size, 32);
            .px2rem(line-height, 32);
            color: #2D2D2D;
        }
        .dec {
            .px2rem(line-height, 26);
            .px2rem(margin-top, 16);
            .px2px(font-size, 26);
            color: #AAAAAA;
        }
    }
    .main {
        width: 100%;
        position: absolute;
        .px2rem(top, 88);
        left: 0;
        right: 0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: scroll;
        background: #FFF;
    }
    .content {
        .flex-box-1();
    }
    .sub-button {
        margin: 0 auto;
        width: 95%;
        .px2rem(height, 90);
        .px2rem(line-height, 90);
        background: #F76A75;
        color: white;
        border-radius: 10px;
        .px2px(font-size, 32);
        text-align: center;
    }

    .item.group, .item.contact {
        .icon--14::before {
            transform: rotate(0deg);
            .transition(0.3s,all);
        }
    }
    .item.group.opend, .item.contact.opend {
        .icon--14::before {
            transform: rotate(-180deg);
            .transition(0.3s, all);
        }
    }
}
